<template>
  <div id="iHeader">
    <div class="header-left">
      <!-- <iTime /> -->
      <div v-if="role !== '0'">
        当前工程：
        <el-select v-model="projectId" @change="projectChange">
          <el-option v-for="project in projectList_" :key="project.id" :value="project.id" :label="project.name"></el-option>
        </el-select>
      </div>
    </div>
    <div class="header-right">
      <iExit />
    </div>
  </div>
</template>

<script>
import iTime from './iTime.vue'
import iExit from './iExit.vue'
import { getUserRole } from '../utils/auth'
import { getProjectList } from '../api/project/index2.js'
export default {
  name: 'iHeader',
  components: {
    iTime,
    iExit,
  },
  data: () => ({
    projectId: '',
    role: null,
    projectList_: [],
  }),
  methods: {
    // 获取身份
    async getUserRole_() {
      this.role = await getUserRole()
    },
    // 设置工程列表
    setProjectList_(projectList) {
      this.projectList_ = projectList
      this.$store.commit('setProjectList', projectList)
      // 通知其他页面做出改变
      this.$ebs.$emit('projectList_change', null)
    },
    // 获取所有工程列表
    async getProjectList_() {
      let data = await getProjectList({})
      if (data.result == 0) {
        this.setProjectList_(data.resultContent.projectList)
        if (this.projectId) {
          this.projectChange(true)
        }
        this.$message.success('项目列表已更新')
      }
    },
    // 设置选中工程
    setSelectProject_(projectId) {
      this.$ebs.$emit('selectProject_change', projectId)
    },
    // 选择工程发生改变 state 是否判断选中项是否存在
    projectChange() {
      // 找出选中项
      let selectProject = null
      this.projectList_.filter(item => {
        if (item.id == this.projectId) {
          selectProject = item
          return true
        }
      })
      if (selectProject) {
        // 设置选中项
        this.$store.commit('setProjectInfo', selectProject)
      } else {
        this.$store.commit('setProjectInfo', null)
      }
      // 通知其他页面做出改变
      this.setSelectProject_(this.projectId)
    },
  },
  mounted() {
    this.getUserRole_()
    this.getProjectList_()
    // 接受 其他页面发起的重新获取项目列表 selectProject_change_iHeader
    this.$ebs.$on('getProjectList_iHeader', selectId => {
      this.getProjectList_()
    })
    // 接受 其他页面的选中项变化并跟随改变 selectProject_change_iHeader
    this.$ebs.$on('selectProject_change_iHeader', selectId => {
      this.projectId = selectId
    })

    // 模拟警告
    this.$notify({
      title: '警告',
      message: `《测试项目1》项目警告：
      {部位1}下的[点1]沉降异常`,
      type: 'warning',
    })

  },
  destroyed() {
    this.$ebs.$off('getProjectList_iHeader')
    this.$ebs.$off('selectProject_change_iHeader')
  },
}
</script>

<style lang="scss" scoped>
#iHeader {
  width: 100%;
  height: 100%;
  display: flex;

  & > div {
    height: 100%;
    display: inherit;
    align-items: center;
  }

  .header-left {
    flex: 2;
    justify-content: flex-start;

    .project-manager {
      margin-left: 10px;
      // width: 300px;
      display: inline-block;
    }
  }

  .header-right {
    flex: 1;
    justify-content: flex-end;
  }
}
</style>
